{% raw -%}
<transition name="solara-transition" :duration="{ enter: 500, leave: 500 }">
    <div v-if="loading" id="loader-container">
        <v-container id="loader" key="loader" class="solara-loader" fluid>
            <v-row>
                <v-col>
                    <div id="sun-spinner-container">
                        <!-- <img id="sun-spinner" height="100px" src="static/assets/favicon.svg" /> -->
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                            xmlns:svgjs="http://svgjs.com/svgjs" width="65" height="65"><svg width="65" height="65"
                                viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path id="sun-spinner1" style="transform-origin: center;"
                                    d="M57.11 30.64L61.47 17.87L48.7 13.51L42.76 1.39999L30.65 7.34999L17.87 2.97999L13.51 15.75L1.40002 21.7L7.35002 33.81L2.99002 46.58L15.76 50.94L21.71 63.06L33.82 57.11L46.59 61.47L50.95 48.7L63.06 42.75L57.11 30.64ZM54.26 34.39L34.39 54.26C33.19 55.46 31.25 55.46 30.05 54.26L10.2 34.4C9.00002 33.2 9.00002 31.26 10.2 30.07L30.06 10.2C31.26 8.99999 33.2 8.99999 34.4 10.2L54.27 30.07C55.47 31.27 55.47 33.21 54.27 34.4L54.26 34.39Z"
                                    fill="#FFCF64"></path>
                                <path id="sun-spinner2" style="transform-origin: center;"
                                    d="M53.62 19.42L51.65 6.07L38.3 8.04L27.46 0L19.42 10.84L6.07 12.82L8.04 26.17L0 37L10.84 45.04L12.81 58.39L26.16 56.42L37 64.46L45.04 53.62L58.39 51.64L56.42 38.29L64.46 27.45L53.62 19.4V19.42ZM52.8 24.06L44.24 50.82C43.72 52.43 42 53.32 40.39 52.81L13.63 44.25C12.02 43.74 11.13 42.01 11.64 40.4L20.21 13.64C20.72 12.03 22.45 11.14 24.06 11.65L50.82 20.21C52.43 20.72 53.32 22.45 52.81 24.06H52.8Z"
                                    fill="#FF8C3E"></path>
                            </svg>
                        </svg>

                    </div>
                    <h1>{{ loading_text }}</h1>

                </v-col>
            </v-row>
        </v-container>
        <div style="right: 50px; bottom: 10px; position: absolute;">
            <b>Made with <a href="https://solara.dev">Solara</a></b>
        </div>
    </div>
    <div v-else>
        <jupyter-widget-mount-point mount-id="solara-main">
            A widget with mount-id="solara-main" should go here
        </jupyter-widget-mount-point>
        <div v-if="showBanner" style="position: absolute; right: 0px; bottom: 0px; padding: 10px;">
            <b>This website runs on <a href="https://solara.dev">Solara</a></b>
        </div>
    </div>
</transition>
{% endraw -%}
